import React, { Component } from 'react';
import $ from 'jquery';
import Banner from '@/components/MusicHall/album/Banner'
import '@/components/MusicHall/album/AlbumNav.scss'


class AlbumNav extends Component {
  constructor (props) {
    super(props)
    this.state = {
      area:['内地','港台','欧美','韩国','日本','其他'],
      genre:['全部','流行','古典','爵士','摇滚','电子','拉丁','轻音乐','世界音乐','嘻哈','原声','乡村','舞曲','R&B','民谣','金属'],
      Type:['全部','专辑','EP','Single','演唱会','动漫','游戏'],
      Year:['全部','2018','2017','2016','2015','2014','2013','2012','一零年代','零零年代','九十年代','八十年代','七十年代','六十年代'],
      EMI:['全部','华纳唱片','索尼音乐','环球唱片','杰威尔音乐有限公司','英皇唱片','金牌大风','福茂唱片','宏声音乐','通力唱片','林暐哲音乐社','滚石唱片','相信音乐','华研国际音乐','星娱音乐'],
      album_area:'港台',
      album_genre:'',
      album_type:''
    }
  }

  componentDidMount () {
    $('.album_nav_area_li').eq(1).addClass('active_area');
    $('.album_nav_genre_li').eq(0).addClass('active_genre');
    $('.album_nav_type_li').eq(0).addClass('active_type');
    $('#root').click(function(){
      $('.album_list').hide();
    })
    //区域--点击时背景改变
    $('.album_nav_area_li').click(function(){
      $('.album_nav_area_li').removeClass('active_area')
      $(this).addClass('active_area')
    })
    //流派--点击时背景改变
    $('.album_nav_genre_li').click(function(){
      $('.album_nav_genre_li').removeClass('active_genre')
      $(this).addClass('active_genre')
    })
    //类别--点击时背景改变
    $('.album_nav_type_li').click(function(){
      $('.album_nav_type_li').removeClass('active_type')
      $(this).addClass('active_type')
    })
    // //年代/唱片公司--点击时背景改变
    // $('.album_nav_y_li').click(function(){
    //   $('.album_nav_y_li').removeClass('active_y')
    //   $(this).addClass('active_y')
    // })
  }

// 显示---地域
  albumArea (e) {
    // console.log(e)
    this.setState({
      album_area: e
    })
  }  
//显示---类别
  albumType (e) {
    // console.log(e)
    if (e === '全部') {
      this.setState({
        album_type: '全部'
      })
      $('.part_detail__type').hide();
      $('.album_nav_type_li').eq(0).addClass('active_type');
    } else {
      this.setState({
        album_type: e
      })
      // $('.part_detail__h2').hide();
      $('.part_detail__type').show();
    }   
  }
//显示---流派
  albumGenre (e,index) {
    // console.log(e)
    if (e === '全部') {
      this.setState({
        album_genre: '全部'
      })
      $('.part_detail__genre').hide();
    } else {
      this.setState({
        album_genre: e
      })
      // $('.part_detail__h2').hide();
      $('.part_detail__genre').show();
    }    
  }
//删除
  albumRemove (e) {
    if (e === 'genre') {
      //  console.log('流派')
      this.setState({
        album_genre: ''
      })
      $('.part_detail__genre').hide();
      $('.album_nav_genre_li').removeClass('active_genre')
      $('.album_nav_genre_li').eq(0).addClass('active_genre');
    } else if (e === 'type') {
      //  console.log('类别')
      this.setState({
        album_type: ''
      })
      $('.part_detail__type').hide();
      $('.album_nav_type_li').removeClass('active_type')
      $('.album_nav_type_li').eq(0).addClass('active_type');
    }
  }

//显示------年代/唱片公司---详情
  listshow (e) {
    // console.log(e);
    $('.album_list').hide();
    $(e).show();
  }

  render () {   
    return (
      <div className = "album_nav_box">
          {/* 地域 */}
          <div className='album_nav'>
            <ul>
              <h1> </h1>
              {
                this.state.area.map((item, index) => {
                  // console.log(item)
                  return (
                    <li  className='album_nav_area_li'  key={index} onClick={this.albumArea.bind(this, item)}>{item}</li>
                  )
                })
                
              }
            </ul>
          </div>
          {/* 流派 */}
          <div className='album_nav'>
            <ul>
              <h1>流派</h1>
              {
                this.state.genre.map((item, index) => {
                  // console.log(item)
                  return (
                    <li className='album_nav_genre_li' key={index} onClick={this.albumGenre.bind(this, item)}>{item}</li>
                  )
                })
                
              }
            </ul>
          </div>
          {/* 类别 */}
          <div className='album_nav'>
            <ul>
              <h1>类别</h1>
              {
                this.state.Type.map((item, index) => {
                  // console.log(item)
                  return (
                    <li className='album_nav_type_li' key={index} onClick={this.albumType.bind(this, item)}>{item}</li>
                  )
                })
                
              }
            </ul>
          </div>
          {/* 筛选 */}
          <div className='album_nav'>
            <ul>
              <h1>筛选</h1>
              <li className='album_year album_nav_y_li' onClick={this.listshow.bind(this, '#album_year_list')}>
                年代
                <i className='iconfont icon-unfold'></i>
              </li>
              <li className='album_EMI  album_nav_y_li' onClick={this.listshow.bind(this, '#album_EMI_list')}>
                唱片公司
                <i className='iconfont icon-unfold'></i>
              </li>
            </ul>
          </div>
          {/* 歌曲分类的框框 */}
          <div className='part_detail__hd'>
              <h2 className='part_detail__h2'>{this.state.album_area}</h2>
              <div className='part_detail__genre'>
                {this.state.album_genre}
                <i className='iconfont icon-close_light' onClick={this.albumRemove.bind(this, 'genre')}></i>
              </div>
              <div className='part_detail__type'>
                {this.state.album_type}
                <i className='iconfont icon-close_light' onClick={this.albumRemove.bind(this, 'type')}></i>
              </div>
          </div>
          {/* 年代---列表 */}
          <div className='album_list' id='album_year_list'>
              <ul>
                {
                  this.state.Year.map((item, index) => {
                    return (
                      <li key={index}>{item}</li>
                    )
                  })
                }
              </ul>
          </div>
          {/* 唱片公司---列表 */}
          <div className='album_list' id='album_EMI_list'>
              <ul>
                {
                  this.state.EMI.map((item, index) => {
                    return (
                      <li key={index}>{item}</li>
                    )
                  })
                }
              </ul>
          </div>
          <Banner area={this.state.album_area} genre={this.state.album_genre} Type={this.state.album_type}/>
      </div>
    )
  }
}

export default AlbumNav;